<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
  <meta name="description" content="Web site created using create-react-app" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <title><%- title %> - 中后台解决方案</title>
</head>

<body>
  <div id="root">
    <style>
      .init_loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .init_loading_container {
        width: 200px;
        height: 200px;
        animation: rotate-spin 2s ease-in-out infinite;
      }

      .dot {
        width: 70px;
        height: 70px;
        border-radius: 80%;
        background-color: #000;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

      .dot_three {
        background-color: #58AAE0;
        animation: dot-three-spin 2s ease infinite;
      }

      .dot_two {
        background-color: #58AAE0;
        animation: dot-two-spin 2s ease infinite;
      }

      .dot_one {
        background-color: #58AAE0;
        animation: dot-one-spin 2s ease infinite;
      }
      .init_loading_text {
        font-size: 24px;
        font-weight: bold;
        color: #3e3e3e;
      }

      @keyframes dot-three-spin {
        20% {
          transform: scale(1);
        }

        45% {
          transform: translateY(-18px) scale(0.45);
        }

        60% {
          transform: translateY(-40px) scale(0.45);
        }

        80% {
          transform: translateY(-40px) scale(0.45);
        }

        100% {
          transform: translateY(0px) scale(1);
        }
      }

      @keyframes dot-two-spin {
        20% {
          transform: scale(1);
        }

        45% {
          transform: translate(-16px, 12px) scale(0.45);
        }

        60% {
          transform: translate(-40px, 40px) scale(0.45);
        }

        80% {
          transform: translate(-40px, 40px) scale(0.45);
        }

        100% {
          transform: translateY(0px) scale(1);
        }
      }

      @keyframes dot-one-spin {
        20% {
          transform: scale(1);
        }

        45% {
          transform: translate(16px, 12px) scale(0.45);
        }

        60% {
          transform: translate(40px, 40px) scale(0.45);
        }

        80% {
          transform: translate(40px, 40px) scale(0.45);
        }

        100% {
          transform: translateY(0px) scale(1);
        }
      }

      @keyframes rotate-spin {
        55% {
          transform: rotate(0deg);
        }

        80% {
          transform: rotate(360deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }
    </style>
    <div class="init_loading">
      <div class="init_loading_container">
        <div class="dot dot_one"></div>
        <div class="dot dot_two"></div>
        <div class="dot dot_three"></div>
      </div>
      <div class="init_loading_text">加载中...</div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>
